<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-form :model="roleForm" label-width="70px">
          <el-col :span="9">
            <el-form-item label="名称">
              <el-input v-model="roleForm.roleName"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button type="info" plain @click="serachFor">搜索</el-button>
        <el-button type="primary" plain @click="userMenuVisible=true">添加</el-button>
      </el-row>

      <el-table
        :data="roleList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit"
                       @click="getUserFrom(scope.row.id)"></el-button>
            <el-button type="primary" size="small" icon="el-icon-edit"
                       @click="rolePower(scope.row)">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 角色添加 -->
      <el-dialog title="角色添加" :visible.sync="userMenuVisible" :close-on-click-modal="false" @closed="clearUserMenu">
        <el-form :model="menuFrom" >
          <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称" >
              <el-input v-model="menuFrom.roleName" style="width: 40%" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="24">
            <el-form-item label="备注" >
              <el-input v-model="menuFrom.remarks" style="width: 40%" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button @click="userMenuVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUserRole">完 成</el-button>
        </div>
      </el-dialog>
<!-- 角色授权     -->
      <el-dialog title="角色授权" :visible.sync="roleVisible" :close-on-click-modal="false" @closed="clearUserMenu">
        <el-form  >
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色名称" >
                <el-input v-model="roleName" disabled style="width: 40%" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单树" >
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  :default-checked-keys="menuIds"
                  :check-strictly="true"
                  default-expand-all
                  :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span><i :class="data.icon"></i>{{ data.menuName }}&nbsp;&nbsp;&nbsp;</span>
              </span>
                </el-tree>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button @click="roleVisible = false">取 消</el-button>
          <el-button type="primary" @click="roleMenu">完 成</el-button>
        </div>
        {{menuIds}}
      </el-dialog>
    </el-card>


  </div>
</template>

<script>
    export default {
        name: "Role",
      data() {
        return {
          data:[{
            id: 0,
            icon:'el-icon-setting',
            menuName: '用户管理系统',
            children: []
          }],
          roleForm:{},
          roleList:[],
          userMenuVisible:false,
          menuFrom:{},
          roleVisible:false,
          roleName:'',
          roleId:null,
          menuIds:[]
        }
      },
      methods:{
        roleMenu: function () {
          let ids1 = this.$refs.tree.getHalfCheckedKeys();
          let ids2 = this.$refs.tree.getCheckedKeys()
          this.menuIds=ids1.concat(ids2)

          var formdata = new FormData();
          formdata.append("roleId", this.roleId);
          formdata.append("menuIds", this.menuIds);
          this.$http.post("/roleMenu/save",formdata).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message)
            }
            this.roleVisible=false
          });
        },

        rolePower:async function (row) {
          let tree = await this.$http.get("/menu/getTree");
          this.data[0].children=tree.data.result;
          this.roleVisible=true
          this.roleId=row.id
          this.roleName=row.roleName
          this.$http.get("/roleMenu/getByRoleId/"+row.id).then((res) => {
            if (res.data.success) {
              this.menuIds = res.data.result;
              this.$refs.tree.setCheckedKeys([0])
            } else {
              this.$message.error(res.data.message)
            }
          });
        },
        saveUserRole: function () {
          this.$http.post("/role/save",this.menuFrom).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message)
            }
            this.userMenuVisible=false
            this.searchRole();
          });
        },
        clearUserMenu: function () {
          this.userMenuVisible=false
          this.menuFrom={}

        },
        serachFor: function () {
          this.searchRole();
        },
        searchRole: function () {
          this.$http.post("/role/list", this.roleForm).then(
            (res) => {
              this.roleList=res.data.result;
              console.log(res)
            }
          );
        }
      },
      mounted() {
        this.searchRole();
      }
    }
</script>

<style scoped>

</style>
